<template>
  <div class="profile-page">
    <!-- 用户信息头部 -->
    <div class="profile-header">
      <div class="user-info">
        <div class="avatar">
          <van-image
            :src="userInfo.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'"
            width="60"
            height="60"
            round
            fit="cover"
          />
        </div>
        <div class="user-details">
          <h3 class="username">{{ userInfo.name || '未登录' }}</h3>
          <p class="phone">{{ userInfo.phone || '' }}</p>
          <p class="role" v-if="userStore.userRole">{{ userStore.userRole }}</p>
        </div>
      </div>
      <div class="notification" @click="handleNotification">
        <van-icon name="chat-o" size="20" color="white" />
        <van-badge :content="notificationCount" v-if="notificationCount > 0" />
      </div>
    </div>

    <!-- 管理功能卡片 -->
    <div class="management-cards" v-if="userStore.isLoggedIn">
      <div class="card patient-card" @click="handlePatientManagement">
        <div class="card-icon">
          <van-icon name="friends-o" size="24" color="#1989fa" />
        </div>
        <div class="card-text">就诊人管理</div>
      </div>
      <div class="card inpatient-card" @click="handleInpatientManagement">
        <div class="card-icon">
          <van-icon name="hospital-o" size="24" color="#1989fa" />
        </div>
        <div class="card-text">住院人管理</div>
      </div>
      
    </div>

    <!-- 功能列表 -->
    <div class="function-list" v-if="userStore.isLoggedIn">
      <van-cell-group>
        <van-cell
          v-for="item in functionList"
          :key="item.id"
          :title="item.title"
          :icon="item.icon"
          is-link
          @click="handleFunctionClick(item)"
          class="function-item"
        />
      </van-cell-group>
    </div>

    <!-- 登录/登出按钮 -->
    <div class="auth-section">
      <van-button
        v-if="!userStore.isLoggedIn"
        type="primary"
        size="large"
        block
        round
        @click="goToLogin"
        class="login-button"
      >
        立即登录
      </van-button>
      <van-button
        v-else
        type="danger"
        size="large"
        block
        round
        @click="handleLogout"
        class="logout-button"
      >
        退出登录
      </van-button>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="activeTab" fixed>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/profile">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { api } from '@/api'
import { useUserStore } from '@/stores/user'
import { Toast } from 'vant'

const router = useRouter()
const userStore = useUserStore()
const activeTab = ref(1) // 个人中心页面，所以默认选中第二个tab

// 使用store中的用户信息
const userInfo = computed(() => ({
  name: userStore.userName,
  phone: userStore.userPhone,
  avatar: userStore.userAvatar
}))

// 通知数量
const notificationCount = computed(() => userStore.notificationCount)

// 功能列表
const functionList = ref([
  { id: 1, title: '预约挂号记录', icon: 'calendar-o' },
  { id: 2, title: '门诊缴费记录', icon: 'gold-coin-o' },
  { id: 3, title: '门诊充值记录', icon: 'balance-list-o' },
  // { id: 4, title: '住院充值记录', icon: 'hospital-o' },
  // { id: 5, title: '核酸预约记录', icon: 'lab-o' },
  // { id: 6, title: '体检预约记录', icon: 'health' },
  // { id: 7, title: '病案申请邮寄记录', icon: 'records' },
  { id: 8, title: '问题反馈', icon: 'comment-o' }
])

// 事件处理
const handleNotification = () => {
  console.log('查看通知')
  // TODO: 跳转到通知页面
 Toast('稍后再试试!');
}

const handlePatientManagement = () => {
  router.push('/patient/management')
  
}

const handleInpatientManagement = () => {
  console.log('住院人管理')
  // TODO: 跳转到住院人管理页面
  Toast('暂时不可以查看住院人信息!!!');
}

// 门诊费用入口迁移到首页

const handleFunctionClick = (item: any) => {
  console.log('点击功能:', item.title)
  
  // 根据功能类型跳转到对应页面
  switch (item.id) {
    case 1: // 预约挂号记录
      router.push('/appointment-records')
      break
    case 2: // 门诊缴费记录
      router.push('/outpatient-expenses')
      break
    case 3: // 门诊充值记录
      Toast('请联系管理员升级版本!!!')
      break
    case 8: // 问题反馈
      Toast('请联系管理员升级版本!!!')
      break
    default:
      Toast('请联系管理员升级版本!!!')
      break
  }
}

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login')
}

// 处理登出
const handleLogout = () => {
  userStore.logout()
  Toast('已退出登录')
}

onMounted(() => {
  // 页面加载时刷新数据（如果已登录）
  if (userStore.isLoggedIn) {
    userStore.fetchUserInfo()
    userStore.fetchNotificationCount()
  }
})
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px; /* 为底部导航栏留出空间 */
}

/* 用户信息头部 */
.profile-header {
  background: linear-gradient(135deg, #1989fa 0%, #1976d2 100%);
  padding: 20px 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  margin-right: 16px;
}

.user-details {
  color: white;
}

.username {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.phone {
  font-size: 14px;
  opacity: 0.8;
  margin: 0 0 2px 0;
}

.role {
  font-size: 12px;
  opacity: 0.7;
  margin: 0;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.notification {
  position: relative;
  cursor: pointer;
}

/* 管理功能卡片 */
.management-cards {
  display: flex;
  gap: 12px;
  margin: -20px 16px 20px;
  position: relative;
  z-index: 1;
}

.card {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.card:active {
  transform: scale(0.98);
}

.card-icon {
  margin-bottom: 8px;
}

.card-text {
  font-size: 14px;
  color: #323233;
  font-weight: 500;
}

.inpatient-card {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.outpatient-card {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

/* 功能列表 */
.function-list {
  margin: 0 16px;
}

.function-item {
  padding: 16px 0;
}

.function-item :deep(.van-cell__title) {
  font-size: 15px;
  color: #323233;
}

.function-item :deep(.van-icon) {
  color: #1989fa;
  margin-right: 12px;
}

/* 登录/登出按钮样式 */
.auth-section {
  margin: 20px 16px;
}

.login-button {
  background: linear-gradient(135deg, #1989fa 0%, #1976d2 100%);
  border: none;
}

.logout-button {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  border: none;
}

/* 底部导航栏样式调整 */
:deep(.van-tabbar) {
  background-color: white;
  border-top: 1px solid #ebedf0;
}

:deep(.van-tabbar-item--active) {
  color: #1989fa;
}
</style>
